<!--
 * @Author: Rachel 943701297@qq.com
 * @Date: 2022-07-24 14:45:02
 * @LastEditors: Rachel 943701297@qq.com
 * @LastEditTime: 2022-08-20 22:17:05
 * @FilePath: \代码c:\Users\94370\Desktop\面向工作学习\笔记\learning-notes\Vue_Code\vue_basic_sgg\index.html
 * @Description: 
 * 
 * Copyright (c) 2022 by Rachel 943701297@qq.com, All Rights Reserved. 
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <school></school>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false;

    const school = Vue.extend({
      template: `
      <div>
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
      </div>
      `,
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      methods: {
        showName() {
          alert(this.schoolName);
        },
      },
    });

    const vm = new Vue({
      el: "#root",
      components: { school },
    });

    //定义一个构造函数
    function Demo() {
      this.a = 1;
      this.b = 2;
    }
    //创建一个Demo的实例对象
    const d = new Demo();

    console.log(Demo.prototype); //显示原型属性

    console.log(d.__proto__); //隐式原型属性

    console.log(Demo.prototype === d.__proto__);

    //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
    Demo.prototype.x = 99;
  </script>
</html>
